<template>
  <div class="apply-card">
    <p class="title"  >选择办卡用户</p>
    <p class="change" @click="router({path:'searchPerson',query:{type:'banka'}})"><span>{{member}}</span> <img src="@/assets/hybk01.png" alt=""></p>
    <p class="is_change">
      <span v-show="!uid" @click="router({path:'searchPerson',query:{type:'banka'}})">{{choice}}</span>
      <span v-show="lists.length<=0 && uid" @click="router({path:'editChild', query:{uid: uid}})">{{choice}}</span>
      <popup-picker v-show="lists.length > 0 && lists" title="请选择孩子" :data="lists" v-model="children" @on-change="getId" placeholder="请选择"></popup-picker>
      <img src="@/assets/mddk04.png" alt="">
    </p>
    <div class="input-div">
      <span>次数</span>
      <input type="number" v-model="times" placeholder="请输入增加次数">
    </div>
    <span class="num">当前剩余{{remain}}次</span>
    <span class="btn" :class = "(child_id && uid && times>0) ? 'active' : ''" @click="onsubmit()">提交</span>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script>
  import {persondetails,childlist,applycard} from '@/api/api'
  import { PopupPicker, Toast } from 'vux'
  export default {
    components: {
      PopupPicker,
      Toast,
    },
    data () {
      return {
        user:'点击选择门店会员',
        info:[],
        children:[],
        lists: [],
        member:'点击选择门店会员',
        choice: '请先选择门店会员',
        remain:' ',
        is_toast:false,
        toast_con:'默认',
        times:0,
        child_list: [],
        child_id: '',
        uid: '',
      }
    },
    created () {
      this.uid = this.$route.query.uid
    },
    mounted () {
      if(this.uid){
        this.person()
        this.child()
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      person(){
        persondetails(this.uid).then((res) =>{
          this.info=res.data.info
          this.remain = res.data.info.remain
          this.member=res.data.info.nickname+'(总剩'+res.data.info.remain+'次)'
        }).catch((err) => {
          console.dir(err)
        })
      },
      child(){
        childlist(this.uid, '', 1, 20).then((res) =>{
          if(!res.data.info){
            this.choice='当前未添加孩子，点击这里创建'
            return;
          }
          this.child_list = res.data.info
          var res_list = [];
          for(var i in res.data.info){
            res_list.push(res.data.info[i].truename)
          }
          this.lists.push(res_list)
        }).catch((err) => {
          console.dir(err)
        })
      },
      getId(value){
        for(var i=0; i<this.child_list.length; i++){
          if(this.child_list[i].truename == value){
            this.child_id = this.child_list[i].id
          }
        }
      },
      onsubmit(){
        if(!this.uid){
          this.is_toast = !this.is_toast
          this.toast_con = '请选择办卡用户'
          return
        }
        if(!this.child_id){
          this.is_toast = !this.is_toast
          this.toast_con = '请选择用户孩子'
          return
        }
        if(this.times<=0){
          this.is_toast = !this.is_toast
          this.toast_con = '请填写次数'
          return
        }
        applycard(this.child_id, this.uid, this.times).then((res) =>{
          if(res.data.status==1){
            this.is_toast = true
            this.toast_con = res.data.info
            setTimeout(() => {
              this.router({path: './home'})
            }, 2000)
          }else{
            this.is_toast = true
            this.toast_con = res.data.info
          }
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.apply-card
  min-height 100vh
  background-color #f5f5f5
  .title
    background-color #fff
    font-size 1.3rem
    color #999
    line-height 4rem
    padding-left 1.5rem
  .change
    font-size 1.8rem
    color #212121
    font-weight bold
    background-color #fff
    padding-left 1.5rem
    padding-bottom 1.8rem
    border-bottom 1px solid #e6e6e6
    position relative
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
    padding-right 5rem
    img
      position absolute
      width 2.1rem
      right 2rem
      top .4rem
  .is_change
    color #666
    font-size 1.5rem
    height 5rem
    line-height 5rem
    background-color #fff
    padding-left 1.5rem
    margin-bottom 1rem
    position relative
    img
      position absolute
      height 1rem
      width auto
      top 2rem
      right 1.5rem
  .input-div
    border-bottom 1px solid #e6e6e6
    height 6.5rem
    line-height 6.5rem
    background-color #fff
    position relative
    span
      width 6rem
      text-align center
      display block
      height 6.5rem
      line-height 6.5rem
      color #212121
      font-size 1.7rem
      font-weight 500
    input
      position absolute
      left 6rem
      color #333
      font-size 1.7rem
      padding-left 1rem
      width calc(100vw - 8rem)
      top 0
      right 1.5rem
      height 6.5rem
      line-height 6.5rem
      outline none
  .num
    height 4.5rem
    line-height 4.5rem
    padding-left 1.5rem
    background-color #fff
    display block
  .btn
    color #fff
    font-size 1.7rem
    font-weight 500
    width 92%
    margin-left 4%
    height 5rem
    line-height 5rem
    background-color #ccc
    display block
    margin-top 1.5rem
    text-align center
    border-radius 100px
  .btn.active
    background-color #152D6F
</style>
